import { defineComponent, ref } from "vue";
import style from "./index.module.less";
import { DropdownItem } from "vant";
import { FilterAreaItemProps } from "./types";
import MenuGroup from "../MenuGroup";
export default defineComponent({
  name: "",
  props: FilterAreaItemProps,
  emits: ["open", "update:modelValue"],
  setup(_, { emit }) {
    const itemRef = ref();
    return () => {
      return (
        <DropdownItem
          title={_.item.title}
          teleport={"body"}
          onOpened={() => {
            emit("open");
          }}
          ref={itemRef}
        >
          <MenuGroup
            onChange={(value: any) => {
              (itemRef.value as any).toggle();
              emit("update:modelValue", value);
            }}
            data={_.data.map((e: any) => ({
              text: e.label,
              value: e.value,
            }))}
          />
        </DropdownItem>
      );
    };
  },
});
